<template>
  <div class="home-pc-container">
    <!-- 主内容 -->
    <div class="main">
      <!-- 详情部分 -->
      <div class="tabs-part">
        <van-tabs v-model="active" swipeable class="tabs">
          <van-tab
            v-for="(item, index) in categories"
            :key="index"
            :name="String(index)"
          >
            <template #title>{{ item.category || "" }} </template>
          </van-tab>
        </van-tabs>

        <van-swipe
          v-loading="swiperLoading"
          v-if="listShow"
          ref="swiper"
          :touchable="false"
          :loop="false"
          :show-indicators="false"
        >
          <van-swipe-item :class="[{ opacity: active != 0 }]">
            <div
              v-if="
                pageShow &&
                listShow &&
                (newsList.length < 2 || !newsList.length)
              "
              class="space"
            ></div>

            <van-list
              class="news-list"
              v-if="pageShow && newsList.length"
              key="news"
              ref="vanList"
              v-model="loading"
              :finished="finished"
              finished-text=""
              @load="onLoad('push')"
              :offset="100"
            >
              <div
                class="item-node"
                :class="'item-' + item.id"
                v-for="(item, index) in newsList"
                :key="index"
              >
                <NewsItem
                  ref="item"
                  :id="item.id"
                  :key="'newsList-' + index"
                  :item.sync="item"
                  :index="index"
                  type="groupDetail"
                />

                <div class="line-1px"></div>

                <!-- <div class="space"></div> -->
              </div>

              <div class="finashed" v-if="finished"></div>
              <div class="news-space"></div>
            </van-list>

            <NoData class="no-data" v-if="pageShow && !newsList.length">
              <p>还没有发布过任何内容呢</p>
            </NoData>
          </van-swipe-item>

          <van-swipe-item :class="[{ opacity: active != 1 }]">
            <div
              v-if="
                pageShow &&
                listShow &&
                (markList.length < 2 || !markList.length)
              "
              class="space"
            ></div>

            <van-list
              class="news-list"
              v-if="pageShow && markList.length"
              ref="vanList"
              v-model="markLoading"
              key="mark"
              :finished="markFinished"
              finished-text=""
              @load="markLoad('push')"
              :offset="100"
            >
              <div
                class="item-node"
                :class="'item-' + item.id"
                v-for="(item, index) in markList"
                :key="index"
              >
                <NewsItem
                  ref="item"
                  :id="item.id"
                  :key="'markList-' + index"
                  :item.sync="item"
                  :index="index"
                />

                <div class="line-1px"></div>
              </div>
              <div class="finashed" v-if="markFinished"></div>

              <div class="news-space"></div>
            </van-list>

            <NoData class="no-data" v-if="pageShow && !markList.length">
              <p>还没有发布过任何内容呢</p>
            </NoData>
          </van-swipe-item>
        </van-swipe>
        <div class="skeleton" v-else>
          <van-skeleton
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            title
            avatar
            :row="3"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// vuex
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";

// 工具函数
import { suffix_v2, stopScroll } from "@/utils";

// 接口
import {
  getMomentList,
  getMomentDetail,
  getCommentList,
} from "@/api/pages/home/groupHome/groupHome.js";

// 组件
import NewsItem from "./components/NewsItem.vue";

export default {
  name: "HomePc",
  data() {
    return {
      // 切换tabs列表内容部分
      active: 0, // 选中tab
      activeHeightRecord: [0, 0, 0, 0], // 各个tab切换时的当前位置记录
      categories: [
        { category: "动态", show: true },
        { category: "精选", show: false },
      ],

      listShow: false, // tabs下方列表数据标识

      data: {}, // 当前小组信息

      swiperLoading: false, // swiper的loading样式

      // 列表数据系列---
      newsList: [],
      page: 1,
      pagesize: 20, // 固定每页展示20个
      loading: false,
      finished: false,
      limit: true,
      // ---

      // 精选
      markLimit: true,
      markList: [],
      markPage: 1,
      markPagesize: 20, // 固定每页展示20个
      markLoading: false,
      markFinished: false,
    };
  },
  props: {},
  mixins: [],
  components: {
    NewsItem,
  },
  computed: {},
  filters: {
    suffix(value) {
      return suffix_v2(value, 120);
    },
  },
  watch: {
    // demoWatch: {
    //   handler(newValue, oldValue) {
    //     // console.log(newValue, oldValue);
    //   },
    //   immediate: true,
    // },
    active(newValue, oldValue) {
      // loading效果
      this.swiperLoading = true;

      let nodeSwiper = this.$refs["swiper"];
      nodeSwiper && this.$refs["swiper"].swipeTo(newValue);

      // 更改swiper内容高度
      this.setSwiperItemHeight(newValue);

      // 记录位置，滚动之前tab位置逻辑
      this.positionScroll(newValue, oldValue);

      setTimeout(() => {
        this.swiperLoading = false;
      }, 300);
    },
  },
  // vue-router路由守卫，前置
  beforeRouteUpdate(to, from, next) {
    next();
  },
  // 销毁组件时执行
  destroyed() {},
  created() {},
  mounted() {
    this.start();
  },
  methods: {
    start() {
      Promise.all([this.onLoad(), this.markLoad()]).then(() => {
        setTimeout(() => {
          this.listShow = true;
        }, 200);
      });
    },

    // 记录位置，滚动之前tab位置逻辑 ---------
    positionScroll(newValue, oldValue) {
      // 切换tab，页面移动到之前位置
      this.activeHeightRecord[Number(oldValue)] =
        document.documentElement.scrollTop;
      this.$nextTick(() => {
        window.scrollTo(0, this.activeHeightRecord[Number(newValue)]);
      });
    },
    // ------------------------

    // 动态数据加载
    onLoad(type) {
      return new Promise((resolve, reject) => {
        if (this.page != 1 && this.active != 0) {
          this.loading = false;
          return false;
        }

        if (!this.limit) return;
        this.limit = false;

        let groupId = this.groupId ? this.groupId : "";

        let json = {
          group_id: groupId,
          page: this.page,
          page_size: this.pagesize,
        };
        getMomentList(json)
          .then((res) => {
            // console.log(res);
            // return false;

            this.pageShow = true;

            let data = res.data && res.data.list ? res.data.list : [];
            // this.handleData(data);

            // 没有更多
            if (!data.length) {
              this.finished = true;
            }

            // 延迟1s钟渲染页面，目的是避免接口过快引起页面闪一下.
            this.delay(type).then(() => {
              // setTimeout(() => {
              //   this.listShow = true;
              // }, 200);

              this.newsList = this.newsList.concat(data);
              this.page++;

              // 定位后，恢复下拉加载和滚动加载.
              this.loading = false;
            });
          })
          .finally(() => {
            this.limit = true;

            resolve();

            setTimeout(() => {
              // 更改swiper内容高度
              this.setSwiperItemHeight(0);
            }, 400);
          });
      });
    },

    // 精选数据加载
    markLoad(type) {
      return new Promise((resolve, reject) => {
        if (this.markPage != 1 && this.active != 1) {
          this.markLoading = false;
          return false;
        }

        if (!this.markLimit) return;
        this.markLimit = false;

        let groupId = this.groupId ? this.groupId : "";

        let json = {
          group_id: groupId,
          page: this.markPage,
          page_size: this.markPagesize,
          is_mark: 1,
        };
        getMomentList(json)
          .then((res) => {
            this.pageShow = true;

            let data = res.data && res.data.list ? res.data.list : [];
            // this.handleData(data);
            // console.log(data);

            // 没有更多
            if (!data.length) {
              this.markFinished = true;
            }

            // 延迟1s钟渲染页面，目的是避免接口过快引起页面闪一下.
            this.delay(type).then(() => {
              // setTimeout(() => {
              //   this.listShow = true;
              // }, 200);

              this.markList = this.markList.concat(data);
              this.markPage++;

              // 定位后，恢复下拉加载和滚动加载.
              this.markLoading = false;
            });
          })
          .finally(() => {
            this.markLimit = true;

            resolve();
          });
      });
    },

    // 更改swiper内容高度
    setSwiperItemHeight(index) {
      this.$nextTick(() => {
        $(".van-swipe-item")
          .css({
            height: 0,
          })
          .eq(index)
          .css({
            height: "auto",
          });
      });
    },

    delay(type) {
      return new Promise((resolve, reject) => {
        if (type == "push") {
          setTimeout(() => {
            resolve();
          }, 500);
        } else {
          resolve();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-pc-container {
  width: 1200px;
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  background: #f5f6f7;
  align-items: flex-start;

  .main {
    width: 618px;
    // height: 500px;

    .publish {
      width: 100%;
      // height: 170px;
      margin-bottom: 8px;
      background: #fff;
      border-radius: 4px;

      .edit {
        min-height: 125px;
        border-bottom: 1px solid #eff0f1;

        .base-info {
          padding: 16px 20px 0 20px;

          .avator {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
          }

          .name {
            font-size: 14px;
            line-height: 150%;
            color: #1f2329;
          }
        }

        .edit-content {
          .field {
            padding: 16px 16px 10px 16px;

            .van-field__word-limit {
              color: #bbbfc4;
            }

            &::after {
              display: none;
            }

            .van-field__body {
              textarea {
                font-size: 16px;
                line-height: 24px;
                min-height: 48px;
              }
            }
          }

          .upload-imgs {
            margin-bottom: 8px;
            padding: 0 20px;

            .img-item {
              position: relative;
              box-sizing: border-box;
              width: 106px;
              height: 106px;
              border: 1px solid #eff0f1;
              border-radius: 4px;
              margin-right: 13px;

              .remove-hot-area {
                position: absolute;
                top: 0;
                right: 0;
                width: 25px;
                height: 25px;

                .img-remove {
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  top: 4px;
                  right: 4px;
                  background: #1f2329;
                  border-radius: 50%;
                  cursor: pointer;

                  img {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }

            .img-add {
              position: relative;
              width: 106px;
              height: 106px;
              background: #f5f6f7;
              border-radius: 4px;
              overflow: hidden;

              .icon {
                width: 24px;
                height: 24px;
              }

              input {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 200%;
                height: 200%;
                transform: translate(-50%, -50%);
                opacity: 0;
                cursor: pointer;
              }
            }
          }
        }
      }

      .tool-bar {
        box-sizing: border-box;
        padding: 12px 20px;

        .upload-img {
          position: relative;
          width: 20px;
          height: 20px;
          overflow: hidden;

          .img-icon {
            width: 100%;
            height: 100%;
          }

          .upload {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 200%;
            transform: translate(-50%, -50%);
            opacity: 0;
            cursor: pointer;
          }
        }

        .btn-publish {
          width: 55px;
          // height: 24px;
          padding: 3px 0;
          background: #3a85f4;
          border-radius: 12px;

          font-weight: 600;
          font-size: 12px;
          line-height: 17px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }

    .tabs-part {
      width: 100%;
      // height: 500px;
      background: #fff;
      margin-bottom: 20px;
      border-radius: 4px;

      /deep/ .tabs {
        position: sticky;
        top: 60px;
        z-index: 120;
        border-radius: 4px 4px 0 0;

        .van-tabs__wrap {
          top: 0;
          // padding-bottom: 4px;
          z-index: 99;
          border-bottom: 1px solid #eff0f1;
          border-radius: 4px 4px 0 0;

          & .van-tab {
            width: 72px;
            flex: inherit;
          }

          &::after {
            border-width: 0;
          }

          .van-tabs__line {
            width: 32px !important;
            height: 4px;
            background: #3a85f4;
            border-radius: 4px;
          }

          .van-tab {
            .van-tab__text {
              font-size: 14px;
              line-height: 20px;
              text-align: center;
              color: #646a73;
            }

            &.van-tab--active {
              .van-tab__text {
                font-weight: 500;
                font-size: 16px;
                line-height: 22px;
                text-align: center;
                color: #1f2329;
              }
            }
          }
        }

        .van-tabs__content {
          .news-list {
            .item-node {
              position: relative;
              padding: 16px 20px 0 20px;
              background: #fff;

              .line-1px {
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -375;
                width: 750px;
                height: 1px;
                background: #eff0f1;
                transform: scale(0.5);
              }
            }

            .finashed {
              color: #969799;
              font-size: 14px;
              text-align: center;
              margin-top: 10px;
            }

            .news-space {
              width: 100%;
              height: 100px;
            }
          }

          .qa-list {
            .item-node {
              position: relative;
              padding: 16px 20px;
              background: #fff;

              .line-1px {
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -375px;
                width: 750px;
                height: 1px;
                background: #eff0f1;
                transform: scale(0.5);
              }
            }

            // 适配iphonex底部
            .space {
              height: 30px;
            }
          }

          .resource-list {
            .item-node {
              position: relative;
              padding: 16px 20px;
              background: #fff;

              .line-1px {
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -375px;
                width: 750px;
                height: 1px;
                background: #eff0f1;
                transform: scale(0.5);
              }
            }

            // 适配iphonex底部
            .space {
              height: 30px;
            }
          }

          .no-data {
            margin-top: 120px;
            min-height: 600px;
          }
        }
      }

      /deep/ .van-swipe {
        cursor: auto;
        border-radius: 0 0 4px 4px;
        user-select: auto;
        // background: #f5f6f7;
        // min-height: 600px;

        // 覆盖loading样式
        .el-loading-mask {
          transition: none;
          z-index: 110;

          .el-loading-spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 100;
            margin-top: -100px;
            margin-left: -20px;
          }
        }

        .van-swipe__track {
          .van-swipe-item {
            position: relative;
            // background: #fff;
            min-height: 600px;
            background: #f5f6f7;
            opacity: 1;

            &.opacity {
              opacity: 0;
              // @extend .trans;
            }

            &.white {
              background: #fff;
            }

            .space {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 600px;
              background: #fff;
              z-index: 99;
            }

            .van-list {
              position: relative;
              z-index: 100;

              .item-node {
                margin-bottom: 8px;
                border-radius: 4px;

                .item-news {
                  border-radius: 4px;
                }

                &:first-child {
                  border-radius: 0 0 4px 4px;

                  .item-news {
                    border-radius: 0 0 4px 4px;
                  }
                }
              }
            }

            .no-data {
              position: relative;
              padding: 80px 0;
              background: #fff;
              z-index: 100;
            }
          }
        }
      }

      .skeleton {
        padding: 20px 0;

        .van-skeleton {
          margin-bottom: 50px;
        }
      }
    }
  }
}
</style>
